<template>
  <d2-container>
    <div class="mod-finance-recharge">
      <!-- 左侧树形结构 -->
      <div class="left-tree-panel">
        <div class="tree-search">
          <el-input 
            v-model="treeSearchText" 
            placeholder="请输入楼栋内容" 
            size="small" 
            clearable>
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="tree-container">
          <el-tree
            :data="treeData"
            :props="treeProps"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            :expand-on-click-node="false"
            @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <div class="right-content-panel">
        <!-- 标签页 -->
        <div class="tab-container">
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="能源收费" name="energy"></el-tab-pane>
            <el-tab-pane label="合并缴费" name="combined"></el-tab-pane>
            <el-tab-pane label="物业费" name="property"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="dataForm" size="small" class="search-form">
          <el-form-item label="房间信息:">
            <el-input v-model="dataForm.roomInfo" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="业主信息:">
            <el-input v-model="dataForm.ownerInfo" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="电话号码:">
            <el-input v-model="dataForm.phone" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="是否欠费:">
            <el-select v-model="dataForm.isOwed" placeholder="全部" clearable>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="缴费状态:">
            <el-select v-model="dataForm.payStatus" placeholder="全部" clearable>
              <el-option label="已缴费" value="1"></el-option>
              <el-option label="未缴费" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getDataList(true)">查询</el-button>
            <el-button @click="resetForm">
              <i class="el-icon-refresh"></i>
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <div class="operation-bar">
          <el-button type="primary" size="small">缴费记录</el-button>
          <el-button type="success" size="small">导出数据</el-button>
          <el-button type="warning" size="small">批量缴费</el-button>
          <el-button type="info" size="small">确认付款</el-button>
        </div>
        <!-- 表格 -->
        <el-table
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle"
          style="width: 100%;">
          <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
          </el-table-column>
          <el-table-column
            prop="sequence"
            header-align="center"
            align="center"
            width="80"
            label="序号">
          </el-table-column>
          <el-table-column
            prop="roomInfo"
            header-align="center"
            align="center"
            label="房间信息">
          </el-table-column>
          <el-table-column
            prop="ownerInfo"
            header-align="center"
            align="center"
            label="业主信息">
          </el-table-column>
          <el-table-column
            prop="phone"
            header-align="center"
            align="center"
            label="电话号码">
          </el-table-column>
          <el-table-column
            prop="electricMeter"
            header-align="center"
            align="center"
            label="电表表号">
          </el-table-column>
          <el-table-column
            prop="waterMeter"
            header-align="center"
            align="center"
            label="水表表号">
          </el-table-column>
          <el-table-column
            prop="liquidMeter"
            header-align="center"
            align="center"
            label="液体表号">
          </el-table-column>
          <el-table-column
            prop="isOwed"
            header-align="center"
            align="center"
            label="合并缴费">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isOwed" size="small" type="danger">未合并</el-tag>
              <el-tag v-else size="small" type="success">已合并</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="amount"
            header-align="center"
            align="center"
            label="余额(元)">
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="120"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="rechargeHandle(scope.row)">充值缴费</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 统计信息 -->
        <div class="summary-info">
          <span>总余额: {{ totalBalance }}</span>
          <span class="ml-4">总欠费: {{ totalOwed }}</span>
        </div>
        <!-- 分页 -->
        <el-pagination
          class="mt-4"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <!-- 充值弹窗 -->
      <recharge-dialog v-if="rechargeVisible" ref="rechargeDialog" @refreshDataList="getDataList"></recharge-dialog>
    </div>
  </d2-container>
</template>
<script>
import RechargeDialog from './recharge-dialog'
export default {
  name: 'finance-recharge',
  data() {
    return {
      treeSearchText: '',
      treeData: [
        {
          id: 1,
          label: '楼栋用房分类',
          children: [
            {
              id: 2,
              label: '宿舍',
              children: [
                { id: 3, label: 'A栋' },
                { id: 4, label: 'B栋' }
              ]
            },
            {
              id: 5,
              label: '二层',
              children: [
                { id: 6, label: 'B栋' }
              ]
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      activeTab: 'energy',
      dataForm: {
        roomInfo: '',
        ownerInfo: '',
        phone: '',
        isOwed: '',
        payStatus: ''
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      rechargeVisible: false,
      totalBalance: 100,
      totalOwed: -9950
    }
  },
  components: {
    RechargeDialog
  },
  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val)
    }
  },
  activated() {
    this.getDataList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      console.log('选中节点:', data)
      this.getDataList()
    },
    handleTabClick(tab) {
      this.getDataList()
    },
    resetForm() {
      this.dataForm = {
        roomInfo: '',
        ownerInfo: '',
        phone: '',
        isOwed: '',
        payStatus: ''
      }
      this.getDataList(true)
    },
    // 获取数据列表
    async getDataList(type) {
      if (type) {
        this.pageIndex = 1
      }
      this.dataListLoading = true
      try {
        const data = await this.$api.finance_recharge_list({
          page: this.pageIndex,
          limit: this.pageSize,
          tab: this.activeTab,
          ...this.dataForm
        })
        this.dataList = data.data.page.list.map((item, index) => ({
          ...item,
          sequence: (this.pageIndex - 1) * this.pageSize + index + 1,
          roomInfo: `社区_01_xx用户`,
          ownerInfo: '李红',
          phone: '',
          electricMeter: '',
          waterMeter: '',
          liquidMeter: '',
          isOwed: index % 3 === 0,
          amount: index % 2 === 0 ? 100 : 0
        }))
        this.totalPage = data.data.page.totalCount
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.dataListLoading = false
      }
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 充值缴费
    rechargeHandle(row) {
      this.rechargeVisible = true
      this.$nextTick(() => {
        this.$refs.rechargeDialog.init(row)
      })
    }
  }
}
</script>
<style scoped>
.mod-finance-recharge {
  display: flex;
  height: calc(100vh - 120px);
}
.left-tree-panel {
  width: 300px;
  border-right: 1px solid #e6e6e6;
  padding: 20px;
  background: #fff;
}
.tree-search {
  margin-bottom: 20px;
}
.tree-container {
  height: calc(100% - 60px);
  overflow-y: auto;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.right-content-panel {
  flex: 1;
  padding: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.breadcrumb-nav {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}
.breadcrumb-nav .current {
  color: #409eff;
}
.tab-container {
  margin-bottom: 20px;
}
.tab-container .el-tabs__header {
  margin: 0;
}
.search-form {
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}
.search-form .el-form-item {
  margin-bottom: 10px;
}
.operation-bar {
  margin-bottom: 20px;
}
.summary-info {
  margin-top: 10px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  font-size: 14px;
}
.ml-4 {
  margin-left: 20px;
}
.mt-4 {
  margin-top: 20px;
}
/* 表格样式调整 */
.el-table {
  flex: 1;
}
</style>
